<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head lang="en">
    <meta charset="UTF-8" />
    <style>
        #main1{
            margin: auto;
        }
    </style>

    <script th:src="@{/js/echarts.min.js}"></script>
    <script th:src="@{/js/echarts.js}"></script>
    <script th:src="@{/js/Chart.js}"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main1" style="width: 900px;height:400px;"></div>
<script type="text/javascript" th:src="@{/js/jquery-1.8.3.min.js}"></script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart1 = echarts.init(document.getElementById('main1'));
    /*var myChart2 = echarts.init(document.getElementById('main2'));*/
    // 指定图表的配置项和数据
    var app ={title : '环形图'};
    option1 = {
        backgroundColor: '#fefefe',
        title: {
            text: '逾期期限占比',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            x: '75% ',
            y:'35%',
            data:['7天内占比','15天内占比','30天内占比','45天内占比','60天以上占比']
        },
        series: [
            {
                name:'访问来源',
                type:'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data:[
                    {value:1520,name:'7天内占比'},
                    {value:310, name:'15天内占比'},
                    {value:234, name:'30天内占比'},
                    {value:135, name:'45天内占比'},
                    {value:1548,name:'60天以上占比'},
                    /*{value:135, name:'90天以上占比'}*/
                ]
            }
        ]
    };
    myChart1.setOption(option1);
   /* $(function () {
        $.ajax({
            "url": "jh/qryMonryNumTwo",
            "type": "get",
            "data": {},
            "datetype": "JSON",
            "success": function (data) {
                option1.series.data =[data];
                myChart1.setOption(option1);
                console.log(option1.series)
            }
        })
    });*/
</script>
</body>
</html>